<template>
  <div class="fall" style="height: 300px;width: 1000px">
    <div style="float: left">
      <ul style="text-align: center;height: 250px;width: 250px">
        <div class="pic">
          <el-image src="/src/assets/pay/6.png" style="height: 200px"/>
        </div>
        <el-popconfirm cancel-button-text="取消" confirm-button-text="确认" title="确认充值?"
                       @confirm="recharge(60)">
          <template #reference>
            <el-button style="font-size: 30px" type="text">￥ 60</el-button>
          </template>
        </el-popconfirm>
      </ul>
    </div>
    <div style="float: left">
      <ul style="text-align: center;height: 250px;width: 250px">
        <div class="pic">
          <el-image src="/src/assets/pay/6.png" style="height: 200px"/>
        </div>
        <el-popconfirm cancel-button-text="取消" confirm-button-text="确认" title="确认充值?"
                       @confirm="recharge(300)">
          <template #reference>
            <el-button style="font-size: 30px" type="text">￥ 300</el-button>
          </template>
        </el-popconfirm>
      </ul>
    </div>
    <div style="float: left">
      <ul style="text-align: center;height: 250px;width: 250px">
        <div class="pic">
          <el-image src="/src/assets/pay/98.png" style="height: 200px"/>
        </div>
        <el-popconfirm cancel-button-text="取消" confirm-button-text="确认" title="确认充值?"
                       @confirm="recharge(980)">
          <template #reference>
            <el-button style="font-size: 30px" type="text">￥ 980</el-button>
          </template>
        </el-popconfirm>
      </ul>
    </div>
    <div style="float: left">
      <ul style="text-align: center;height: 250px;width: 250px">
        <div class="pic">
          <el-image src="/src/assets/pay/98.png" style="height: 200px"/>
        </div>
        <el-popconfirm cancel-button-text="取消" confirm-button-text="确认" title="确认充值?"
                       @confirm="recharge(1980)">
          <template #reference>
            <el-button style="font-size: 30px" type="text">￥ 1980</el-button>
          </template>
        </el-popconfirm>
      </ul>
    </div>
    <div style="float: left">
      <ul style="text-align: center;height: 250px;width: 250px">
        <div class="pic">
          <el-image src="/src/assets/pay/328.png" style="height: 200px"/>
        </div>
        <el-popconfirm cancel-button-text="取消" confirm-button-text="确认" title="确认充值?"
                       @confirm="recharge(3280)">
          <template #reference>
            <el-button style="font-size: 30px" type="text">￥ 3280</el-button>
          </template>
        </el-popconfirm>
      </ul>
    </div>
    <div style="float: left">
      <ul style="text-align: center;height: 250px;width: 250px">
        <div class="pic">
          <el-image src="/src/assets/pay/328.png" style="height: 200px"/>
        </div>
        <el-popconfirm cancel-button-text="取消" confirm-button-text="确认" title="确认充值?"
                       @confirm="recharge(6480)">
          <template #reference>
            <el-button style="font-size: 30px" type="text">￥ 6480</el-button>
          </template>
        </el-popconfirm>
      </ul>
    </div>
    <div style="float: left">
      <ul style="text-align: center;height: 250px;width: 250px">
        <div class="pic">
          <el-image src="/src/assets/pay/328.png" style="height: 200px"/>
        </div>
        <el-input v-model="money" autocomplete="off" placeholder="请输入充值金额" style="width: 130px"/>
        <el-popconfirm cancel-button-text="取消" confirm-button-text="确认" title="确认充值?"
                       @confirm="recharge(money)">
          <template #reference>
            <el-button style="font-size: 20px" type="success">充值</el-button>
          </template>
        </el-popconfirm>
      </ul>
    </div>
  </div>

</template>

<script setup>
import {ref} from "vue";
import userApi from "@/api/userApi.js";
import {ElMessage} from "element-plus";

const money = ref('')
function recharge(money) {
  userApi.recharge(money)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg)
        } else {
          ElMessage.error(resp.msg)
        }
      })
}

</script>

<style scoped>

</style>